<template>
  <div>
    <div class="nav-left">
      <div id="viewName" @click="editViewInfo">{{view.name}}</div>
    </div>
    <!--    <label>页面名称：</label>-->
    <!--    <el-input class="viewName" v-model="data.name" style="width: 300px"></el-input>-->
    <div class="nav-right">
      <div id="autoSaveInfo" v-if="autoSaveTime">
        已自动保存 {{autoSaveTime}}
      </div>
      <div class="buttons">
        <el-button type="" icon="el-icon-view" size="mini" @click="handlePreview">预览</el-button>
        <el-button type="primary" icon="el-icon-circle-check" size="mini" @click="handleSave()">保存</el-button>
      </div>
    </div>

  </div>
</template>
<script>
  import vpd from '../mixins/vpd';
  import {updateView} from "@/api/iot/view";

  export default {
    mixins: [vpd],
    props: {
      view: {
        type: Object
      }
    },
    data() {
      return {
        autoSaveTime: null, //最新的自动保存时间
        autoSaveFlag: null, //自动保存定时器
        autoSaveInterval: 60 * 1000 //自动保存间隔时间
      }
    },
    mounted() {
      //定时保存
      this.autoSaveFlag = setInterval(() => {
        this.handleSave(true);
      }, this.autoSaveInterval);

    },
    beforeDestroy() {
      clearInterval(this.autoSaveFlag);
    },
    methods: {
      editViewInfo() {
        this.$vpd.$emit('viewInfo');
      },

      handleSave(isAuto = false) {
        const contentStr = JSON.stringify(this.$vpd.state);
        const content = JSON.parse(contentStr);
        content.uuid = -1; // 先取消选中，如果保存时，焦点在容器组件（或容器内）上，会有显示问题
        content.loadedData = {}; // 加载的数据，不需要保存
        this.view.content = JSON.stringify(content);
        updateView(this.view).then(res => {
          if (res.code === 200) {
            if (isAuto) {
              this.autoSaveTime = this.$dayjs(new Date()).format('HH:mm:ss');
            } else {
              this.msgSuccess("保存成功");
            }

          }
        })
      },
      handlePreview() {
        let routeUrl = this.$router.resolve({
          name: 'ViewShow',
          query: {id: this.view.id}
        });
        window.open(routeUrl.href, '_blank');
      }
    }

  }
</script>
<style lang="scss" scoped>
  .nav-left {
    position: absolute;
    left: 20px;
    display: flex;
  }

  #viewName {
    cursor: pointer;
  }

  .nav-right {
    position: absolute;
    right: 20px;
    display: flex;
  }

  #autoSaveInfo {
    font-size: 14px;
  }

  .buttons {
    margin-left: 60px;
  }
</style>
